<template>
<div>
  <!-- 面包屑区域 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>数据统计</el-breadcrumb-item>
  <el-breadcrumb-item>数据报表</el-breadcrumb-item>
</el-breadcrumb>

<!-- 卡片视图区域 -->
<el-card>
   <!-- 2、为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</el-card>

</div>
</template>

<script>
//1、导入echarts
import echarts from 'echarts';
// import _ from 'lodash';
export default {
  data(){
    return{
     
    }
  },
  async mounted(){
     // 3、基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    const {data:res} = await this.$http.get('reports/type/1')
    if(res.meta.status !==200){
      return this.$message.error('获取表格数据失败')
    }
    // console.log(res);
    


    // const result = _.merge(res.data,this.options)
    //  4、指定图表的配置项和数据
        var option = {
            series : [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            data:[
                {value:835, name:'视频广告'},
                {value:274, name:'联盟广告'},
                {value:310, name:'邮件营销'},
                {value:335, name:'直接访问'},
                {value:400, name:'搜索引擎'}
            ]
        }
    ]
        };



        // 5、使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
  }
  
}
</script>

<style lang="scss">

</style>


